<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增疫情防控用户')" />
	<th:block th:include="include :: select2-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-user-add" class="form-horizontal">
            <input name="deptId" type="hidden" id="treeId"/>
            <h4 class="form-header h4">添加疫情防控部门用户信息</h4>
            <div class="row">
            	<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">先选择部门：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属部门" class="form-control">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">选择用户：</label>

                        <div class="col-sm-8">
                            <input id="memberId" type="hidden" value="${objectIds}">
                            <select class="form-control" id="memberList" name="memberIds" data-id="" style="width: 100%;"></select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">权限：</label>
                        <div class="col-sm-8">
                            <select name="permissionType" class="form-control m-b" th:with="type=${@dict.getType('yq_permise_type')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <textarea name="remark" maxlength="200" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </form>
    </div>
      
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" />
	<script>
	    var prefix = ctx + "epidemic/poweruser";
        var writeDeptId = [[${writeDeptId}]];

        function submitHandler() {
            var data = $("#form-user-add").serializeArray();
            var userIds = $("#memberList").val();
            data.push({"name": "userIds", "value": userIds});
            data.push({"name": "writeDeptId", "value": writeDeptId});
            $.operate.saveTab(prefix + "/add", data);

	    }
         
        /* 用户管理-新增-选择部门树 */
        function selectDeptTree() {
        	var treeId = $("#treeId").val();
        	var deptId = $.common.isEmpty(treeId) ? "1" : $("#treeId").val();
            var url = ctx + "original/dept/selectDeptTree/" + deptId;
			var options = {
				title: '选择部门',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		
		function doSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			var body = $.modal.getChildFrame(index);
   			$("#treeId").val(body.find('#treeId').val());
   			$("#treeName").val(body.find('#treeName').val());
   			$.modal.close(index);
            var deptId = $("#treeId").val();
            getUserList(deptId);
		}

        $("#memberList").select2({
            allowClear: false,
            multiple: true,
            placeholder: "请选择用户"
        });

        function getUserList(deptId){
            $("#memberList>option").remove();
            $.ajax({
                type: "post",
                url : ctx + "original/dept/userlist?deptId" + deptId,
                data: {
                    "deptId": deptId
                },
                success: function(data) {
                    //下拉框的结果集
                    $("#memberList").select2({data: data}).trigger("change");

                    //已选的结果集，根据已选的结果集（转成数组），根据id展示对应的数据
                    var ids=$("#memberId").val().split(",");
                    var arr=[];
                    for(var i=0;i<ids.length;i++){
                        arr.push(ids[i]);
                    }
                    $("#memberList").select2({data: data}).trigger("change");
                    // val可以是单个id，也可以是数组
                    $("#memberList").select2().val(arr).trigger("change");
                }
            });
        }
    </script>
</body>
</html>